<route lang="jsonc" type="page">
    {
      "layout": "tabbar",
      "style": {
        "navigationStyle": "custom",
        "navigationBarTitleText": "我的"
      }
    }
    </route>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getUserInfo } from '@/api/login'
import { IGetUserInfoResponse } from '@/api/types/login'

// 定义用户信息变量
const userInfo = ref<IGetUserInfoResponse['data'] | null>(null)

// 在页面加载时获取用户信息
onMounted(async () => {
  try {
    const res = await getUserInfo()
    if (res.code === 10000) {
      userInfo.value = res.data
      console.log('用户信息获取成功:', userInfo.value)
    } else {
      uni.showToast({
        title: '获取用户信息失败',
        icon: 'error'
      })
    }
  } catch (error) {
    console.error('获取用户信息出错:', error)
    uni.showToast({
      title: '网络错误',
      icon: 'error'
    })
  }
})

//退出登录
const logout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: function (res) {
      if (res.confirm) {
        //清除token
        uni.removeStorageSync('token');
        // 跳转到登录页面
        uni.navigateTo({
          url: '/pages/login/login'
        })
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  });
}

//跳转家族
const goToFamily = () => {
  uni.navigateTo({
    url: '/pages/family/family'
  })
}
//跳转设置
const goTosetup=()=>{
  uni.navigateTo({
    url:'/pages/setup/setup'
  })
}
//跳转问诊
const goToinquiry=()=>{
  uni.navigateTo({
    url:'/pages/inquiry/inquiry'
  })
}
//跳转我的处方
const goToprescription=()=>{
  uni.navigateTo({
    url:'/pages/prescription/prescription'
  })
}
//跳转全部订单
const goToallorder=()=>{
  uni.navigateTo({
    url:'/pages/allorder/allorder'
  })
}
//跳转地址管理
const goToaddress=()=>{
  uni.navigateTo({
    url:'/pages/address/address'
  })
}
//跳转我的优惠券
const goToCoupon=()=>{
  uni.navigateTo({
    url:'/pages/coupon/coupon'
  })
}
//跳转我的积分
const goTointegral=()=>{
  uni.navigateTo({
    url:'/pages/integral/integral'
  })
}


</script>

<template>
  <view>
    <!-- 自定义导航栏 -->
<view class="custom-navigation"></view>
<view class="bigbox">
  <!-- 头像用户 -->
  <view class="box">
    <view class="tou" v-if="userInfo && userInfo.avatar">
      <image :src="userInfo.avatar" mode="aspectFit" style="width: 100%; height: 100%; border-radius: 50%;"></image>
    </view>
    <view class="tou" v-else>
      <image src="/static/images/default-avatar.png" mode="aspectFit" style="width: 100%; height: 100%; border-radius: 50%;"></image>
    </view>
    <view class="yong">{{ userInfo?.account || '用户907456' }}</view>
  </view>
  <!-- 数量 -->
  <view class="box-one">
    <view class="box-samll">
      <view class="shu">{{ userInfo?.collectionNumber || 0 }}</view>
      <view class="zi">收藏</view>
    </view>
    <view class="box-samll">
      <view class="shu">{{ userInfo?.likeNumber || 0 }}</view>
      <view class="zi">关注</view>
    </view>
    <view class="box-samll">
      <view class="shu">{{ userInfo?.score || 0 }}</view>
      <view class="zi">积分</view>
    </view>
    <view class="box-samll">
      <view class="shu">{{ userInfo?.couponNumber || 0 }}</view>
      <view class="zi">优惠卷</view>
    </view>
  </view>
</view>
<view class="bigboxss">
  <!-- 药品订单 -->
  <view class="box-tows" style="margin-top: 23rpx;">
    <view style="display: flex;justify-content: space-between;">
      <view style="font-size: 38rpx;font-weight:bolder;padding:15rpx 26rpx;">药品订单</view>
      <view @click="goToallorder" style="font-size: 28rpx;color: #aaa;padding-right: 25rpx;padding-top:25rpx">全部订单 ></view>
    </view>
    <view style="display: flex;justify-content: space-around;padding-top: 20rpx;">
      <view>
        <image src="/static/image/To_be_paid@1x.png" mode="aspectFit" style="width: 75rpx;height: 65rpx;padding-left: 13rpx;"/>
        <view style="text-align: center;font-size: 27rpx;padding-top: 8rpx;">待付款</view>
      </view>
      <view>
        <image src="/static/image/To_be_shipped@1x.png" mode="aspectFit" style="width: 75rpx;height: 65rpx;padding-left: 13rpx;"/>
        <view style="text-align: center;font-size: 27rpx;padding-top: 8rpx;">待发货</view>
      </view>
      <view>
        <image src="/static/image/To_be_received@1x.png" mode="aspectFit" style="width: 75rpx;height: 65rpx;padding-left: 13rpx;"/>
        <view style="text-align: center;font-size: 27rpx;padding-top: 8rpx;">待收货</view>
      </view>
      <view>
        <image src="/static/image/finished@1x.png" mode="aspectFit" style="width: 75rpx;height: 65rpx;padding-left: 13rpx;"/>
        <view style="text-align: center;font-size: 27rpx;padding-top: 8rpx;">已完成</view>
      </view>
    </view>
  </view>
<!-- 快捷工具 -->
<view class="box-towss" style="margin-top: 23rpx;">
  <view style="font-size: 33rpx;font-weight:bolder;padding:25rpx;">快捷工具</view>
  <view @click="goToinquiry" style="display: flex;justify-content: space-between; padding-bottom: 50rpx;padding-top:25rpx;">
      <view style="display: flex;justify-content: left;">
        <img src="/static/image/1.png" mode="aspectFit" style="width: 55rpx;height: 31rpx;padding-left: 25rpx;"/>
        <view style="padding-left: 25rpx;font-size: 30rpx;">我的问诊</view>
      </view>
      <view style="padding-right: 35rpx;color: #aaa;">></view>
    </view>
    <view @click="goToprescription" style="display: flex;justify-content: space-between; padding-bottom: 50rpx;">
      <view style="display: flex;justify-content: left;">
        <img src="/static/image/2.png" mode="aspectFit" style="width: 50rpx;height: 30rpx;padding-left: 25rpx;"/>
        <view style="padding-left: 25rpx;font-size: 27rpx;">我的处方</view>
      </view>
      <view style="padding-right: 35rpx;color: #aaa;">></view>
    </view>
    <view style="display: flex;justify-content: space-between; padding-bottom: 50rpx;" @click="goToFamily">
      <view style="display: flex;justify-content: left;">
        <img src="/static/image/3.png" mode="aspectFit" style="width: 50rpx;height: 30rpx;padding-left: 25rpx;"/>
        <view style="padding-left: 25rpx;font-size: 27rpx;">家庭档案</view>
      </view>
      <view style="padding-right: 35rpx;color: #aaa;">></view>
    </view>
    <view style="display: flex;justify-content: space-between; padding-bottom: 50rpx;" @click="goToaddress">
      <view style="display: flex;justify-content: left;">
        <img src="/static/image/4.png" mode="aspectFit" style="width: 50rpx;height: 30rpx;padding-left: 25rpx;"/>
        <view style="padding-left: 25rpx;font-size: 27rpx;">地址管理</view>
      </view>
      <view style="padding-right: 35rpx;color: #aaa;">></view>
    </view>
    <view style="display: flex;justify-content: space-between; padding-bottom: 50rpx;">
      <view style="display: flex;justify-content: left;">
        <img src="/static/image/5.png" mode="aspectFit" style="width: 50rpx;height: 30rpx;padding-left: 25rpx;"/>
        <view style="padding-left: 25rpx;font-size: 27rpx;">我的评价</view>
      </view>
      <view style="padding-right: 35rpx;color: #aaa;">></view>
    </view>
    <view style="display: flex;justify-content: space-between; padding-bottom: 50rpx;">
      <view style="display: flex;justify-content: left;">
        <img src="/static/image/6.png" mode="aspectFit" style="width: 50rpx;height: 30rpx;padding-left: 25rpx;"/>
        <view style="padding-left: 25rpx;font-size: 27rpx;">官方客服</view>
      </view>
      <view style="padding-right: 35rpx;color: #aaa;">></view>
    </view>
    <view @click="goTosetup" style="display: flex;justify-content: space-between; padding-bottom: 50rpx;">
      <view style="display: flex;justify-content: left;">
        <img src="/static/image/7.png" mode="aspectFit" style="width: 50rpx;height: 30rpx;padding-left: 25rpx;"/>
        <view style="padding-left: 25rpx;font-size: 27rpx;">设置</view>
      </view>
      <view style="padding-right: 35rpx;color: #aaa;">></view>
    </view>
   
</view>
<view @click="logout" style="text-align:center;padding-top:40rpx;color:red;font-size:33rpx">退出登录</view>
</view>
  </view>
</template>

<style lang="scss" scoped>
    .custom-navigation {
  height: 40px;
  padding-top: 20px;
  background: #a0ded6;
  text-align: center;
  color: white;
  line-height: 90px;
}
.bigbox{
  background: linear-gradient(180deg, #2CB5A575 0%, #2CB5A500 100%);
}
.box{
  width: 100%;
  height: 150rpx;
  display: flex;
  justify-content: left;
}
.tou{
  width: 130rpx;
  height: 130rpx; 
  background: #c4c4c4;
  border-radius: 50%;
  margin-left: 30rpx;
}
.yong{
  font-size: 36rpx;
  // font-weight: 600;
  padding-left: 20rpx;
  padding-top: 17rpx;
}
.box-one{
  width: 100%;
  height: 130rpx;
  display: flex;
  justify-content: space-evenly;
}
.box-samll{
  width: 200rpx;
  height: 130rpx;
  /* background: lightcoral; */
}
.shu{
  font-size: 35rpx;
  // font-weight: bold;
  text-align: center;
  padding-top: 10rpx;
}
.zi{
  font-size: 24rpx;
  color: #c4c4c4;
  text-align: center;
  padding-top: 5rpx;
}
.bigboxss{
  background: #f6f7f9;
  width: 100%;
  height: 100vh;
}

.box-saml{
  display: flex;
  justify-content: space-evenly;
}
.box-tows{
  width: 92%;
  height: 250rpx;
  margin: 0 auto;
  border-radius: 8px;
background: #FFFFFF;
box-shadow: 22px 0px 22px 0px #E5E5E533;
}
.box-towss{
  width: 92%;
  height: 760rpx;
  margin: 0 auto;
  border-radius: 8px;
background: #FFFFFF;
box-shadow: 22px 0px 22px 0px #E5E5E533;
}
</style>
